<template>
    <div class="async-container">
        <el-card class="box-card target-card" shadow="hover">
                <span>目标输入：</span>
                <p></p>
                <el-form :model="chartFrom" label-width="120px">
                    <el-form-item label="图表名称">
                        <el-input v-model="chartFrom.chartName" placeholder="给图表取个名字"/>
                    </el-form-item>
                    <el-form-item label="分析目标">
                      <el-input
                          v-model="chartFrom.target"
                          style="width: 500px"
                          :rows="2"
                          type="textarea"
                          placeholder="请输入你的分析目标"
                      />
                    </el-form-item>
                    <el-form-item label="图表类型">
                        <el-select v-model="chartFrom.chartType" placeholder="图表类型">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                        <el-text class="mx-1" size="small" style="margin-left: 5px;color: #909399; cursor:default">
                            请使用合理的图表类型，否则可能会出现图表展示错乱情况
                        </el-text>
                    </el-form-item>
                    <el-form-item label="上传excel数据">
                        <el-upload
                                ref="uploadFile"
                                class="upload-demo"
                                :auto-upload="false"
                                :on-change="loadJsonFromFile">
                            <template #trigger>
                                <el-button type="primary">上传文件
                                    <el-icon class="el-icon--right">
                                        <Upload/>
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-upload>
                        <el-text class="mx-1" size="small"
                                 style="margin-left: 5px;color: #909399;margin-bottom: 10px;cursor:default;"
                                 :class="{fileInfo:isShowFileInfo}">{{ fileInfoWarn }}
                        </el-text>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toAnalyze">AI 智能分析</el-button>
                    </el-form-item>
                </el-form>
<!--                <el-text size="small"><strong>系统预设：</strong>你是一个数据分析师和前端开发专家，接下来我会按照以下固定格式给你提供内容：-->
<!--                    分析需求： 数据分析的需求或者目标} 原始数据： {csv格式的原始数据，用，作为分隔符}-->
<!--                    请根据这两部分内容，按照以下指定格式生成内容（此外不要输出任何多余的开头、结尾、注释）-->
<!--                    【【【【【 {前端Echarts V5的option配置对象的json格式代码，合理地将数据进行可视化，-->
<!--                    不要生成任何多余的内容，比如注释} 【【【【【 {明确的数据分析结论、越详细越好，不要生成多余的注释}-->
<!--                </el-text>-->
        </el-card>

        <!-- 图表生成信息 -->
        <async-chart-info />
    </div>
</template>

<script setup>
import chartTypeOption from "../../../../common/options.js"
import {Upload} from "@element-plus/icons-vue";
import {ref} from "vue";
import AsyncChartInfo from "./AsyncChartInfo.vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import * as echarts from "echarts";

const chartFrom = ref({
    chartName: '',//图表名字
    target: '', //分析目标
    chartType: '' //图表类型
})

//图表类型选项.
const options = chartTypeOption;
const uploadFile = ref([]); //文件
const fileInfoWarn = ref("最大支持3MB（仅支持excel文件）");
const isShowFileInfo = ref(false);


//当上传文件变动
const loadJsonFromFile = (file, fileList) => {
    uploadFile.value = fileList
    // console.log(uploadFile.value) 文件变动
}
const toAnalyze = async () => {
  if(chartFrom.value.chartName.trim() === ''){
    ElMessage.error("未输入图表名称");
    return;
  }
  if(chartFrom.value.target.trim() === ''){
    ElMessage.error("为输入分析目标");
    return;
  }
  if(chartFrom.value.chartType.trim() === ''){
    ElMessage.error("未选择图表类型");
    return;
  }

  console.log(uploadFile.value.length)
  if(uploadFile.value.length === undefined){
    ElMessage.error("未上传文件");
    return;
  }
  // 解析上传的文件
  if(uploadFile.value.length > 0 && uploadFile.value[0].name != null){
    let fileInfo = uploadFile.value[0].raw;
    const maxFileSize = 1024 * 1024 * 10 //最大10MB
    //这里还需对文件大小进行检验
    if(fileInfo.size > maxFileSize){
      fileInfoWarn.value = "文件过大，请重新上传文件";
      isShowFileInfo.value = true;
      ElMessage.error(fileInfoWarn.value);
      return;
    }
    fileInfoWarn.value = "最大支持3MB（仅支持excel文件）";
    isShowFileInfo.value = false;
    let formData = new FormData();
    formData.append('file',uploadFile.value[0].raw);
    // formData.append('data',chartFrom.value);
    formData.append('name',chartFrom.value.chartName)
    formData.append('goal',chartFrom.value.target)
    formData.append('chartType',chartFrom.value.chartType)
    const instance = axios.create({
      withCredentials: true // 允许携带cookie
    });
    // chartData.loading = true;
    await instance.post('http://localhost:8101/api/analyse/gen', formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 设置请求头，指定为multipart/form-data
      }
    }).then(res => {
      console.log(res);
      res = res.data;
      if(res.code === 0 || res.message === 'ok'){
        let result = res.data;

      }else{
        ElMessage.error(res.message);
      }
    })
  }
}
const render = (option) => {
  const chartDom = document.getElementById('echarts-container');
  const myChart = echarts.init(chartDom);
  console.log("要渲染的option");
  console.log(option);
  option && myChart.setOption(option);
}

</script>

<style scoped>
.fileInfo {
    color: red !important;
}
.async-container{
    margin: 10px;
}
</style>